<template>
	<div class="order_main">
		<div class="main_pdlr10">
			<el-form :inline="true" :model="formHistorySearch" class="orderFormMain " label-width='100px'>
		        <el-form-item label="类型">
		          <el-select v-model="formHistorySearch.type" placeholder="全部">
		          	<el-option label="全部" value=""></el-option>
		            <el-option label="呼入" value="in"></el-option>
		            <el-option label="呼出" value="out"></el-option>
		            <el-option label="内呼" value="inner"></el-option>
		          </el-select>
		        </el-form-item>
		        <el-form-item label="客户电话">
		          <el-input v-model="formHistorySearch.number" placeholder="客户电话"></el-input>
		        </el-form-item>
		        

		        <el-form-item label="呼叫时间">
		        	<el-date-picker
				       v-model="formHistorySearch.start"
				      type="datetime"
				      placeholder="开始时间">
				    </el-date-picker>
		       
		        	<el-date-picker
				       v-model="formHistorySearch.end"
				      type="datetime"
				      placeholder="结束时间">
				    </el-date-picker>
		        </el-form-item>


		        <el-form-item class="sear_btnbox">
		          <el-button type="primary" icon="el-icon-search" @click="searchBtn">查询</el-button>
		          
		        </el-form-item>
		    </el-form>
	      <el-table
	        :data="callListTable"
	        stripe
	        border
	        v-loading="loading"
	        style="width: 100%">
	        <el-table-column
	          type='index'
	          label="序号"
	          align='center'
	          width="50">
	        </el-table-column>
	        <el-table-column
	          min-width="160"
	          label="录音">
	          <template slot-scope="scope">
		          <audio :src="srcfile+scope.row.file" style="height:55px;width:140px"  controls="controls"></audio>
		      </template>
	        </el-table-column>
	        <el-table-column
	          prop="inout"
	          label="类型"
	          width='80'>
	        </el-table-column>
	        <el-table-column
	          prop="calldate"
	          label="呼叫时间"
	          width='160'>
	        </el-table-column>
	        <el-table-column
	          prop="src"
	          label="主叫号码"
	          min-width="120">
	        </el-table-column>
	        <el-table-column
	          prop="dst"
	          label="被叫号码"
	          min-width='120'>
	        </el-table-column>
	        <el-table-column
	          prop="staff"
	          label="服务客服">
	        </el-table-column>
	        <el-table-column
	          prop="duration"
	          label="通话时长"
	          width='100'>
	        </el-table-column>
	        <el-table-column
	          fixed='right'
	          width="120"
	          align='center'
	          label="操作">
	            <template slot-scope="scope">
	              <el-button
	                size="mini"
	                type="primary"
	                @click="onCallOut(scope.$index, scope.row)">回拨</el-button>
	              
	           <el-button
	                size="mini"
	                @click="lookDetails(scope.$index, scope.row)">查看</el-button>
	            </template>
	        </el-table-column>
	      </el-table>

	      
	      <div class="block">
	        <el-pagination
		        @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page.sync="currentPageHistory"
		        :page-sizes="[5, 10, 20, 30]"
		        :page-size="pageSizeHistory"
		        layout="sizes, prev, pager, next"
		        :total="totalHistory">
	        </el-pagination>
	      </div>
	  </div>
	

	</div>
</template>
<script>
import bus from '@/api/bus'
import {
	pxbAllPhoneHistory,
	pxbPhoneCallback} from '@/api'
  export default {
    data() {
      return {
       	formHistorySearch: {//查询条件--没有修正的部分
          type:'',
          number:'',
          start:'',
          end:''
        },
        srcfile:'http://192.168.1.85/record/',
        callListTable:[],
       	loading:true,
       	totalHistory: null,// 分页总条数
        pageSizeHistory:10, //当前分页一页多少条数
        currentPageHistory:1,//当前页数
      };
    },
    created(){
    	let params ={
    		type:'',
    		number:'',
    		start:'',
    		end:'',
    		page:'',
    		size:''
    	}
    	this.searchTable(params);
    },
    methods:{
      searchTable(params){//调入查询接口
      	pxbAllPhoneHistory (params).then(res => {
      		//console.log(res)
					let code = res.data.code;
					this.totalHistory = res.data.total
					if(code == 0){
						let data = res.data.data;
						this.callListTable = data;
						this.loading = false
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				});
      }, 
      phoneCallback (params) { //调入呼出电话接口(立即回拨)
	  		pxbPhoneCallback (params).then(res => {
					let code = res.data.code;
					//console.log(res)
					if(code == 0){
						this.$router.push({ //调取成功跳转到弹屏页面,传入呼出号码
							path: '/home/oncall',
							query: {
								callPhone: params.called
							}
						})
						bus.$emit('hideEvent', true)
					}else if(code == 1){
						this.$message({
							message: '分机号错误!'
						})
					}else if(code == 2){
						this.$message({
							message: '被叫号错误!'
						})
					} else if(code == 3){
						this.$message({
							message: '呼叫失败!'
						})
					}
				});
			},
      handleSizeChange (val) { //改变每页的条数
				this.pageSizeHistory = val;
				this.currentPageHistory = 1
				let params = {
					type:this.formHistorySearch.type,
						number:this.formHistorySearch.number,
						start:this.formHistorySearch.start,
						end:this.formHistorySearch.end,
					page: this.currentPageHistory,
					size: this.pageSizeHistory
				}
				this.searchTable(params);//调用查询接口
			},
			handleCurrentChange (val) { //改变当前页
				this.currentPageHistory = val
				let params = {
					type:this.formHistorySearch.type,
					number:this.formHistorySearch.number,
					start:this.formHistorySearch.start,
					end:this.formHistorySearch.end,                                                                      
					page: this.currentPageHistory,
					size: this.pageSizeHistory
				}
				this.searchTable(params);//调用查询接口
			},
	    onCallOut(index,row){ //点击回拨电话调用接口phoneCallback拨打出电话
		  	let params = {
		  		device: sessionStorage.getItem('device'),
		  		called: row.dst
		  	}
		  	//console.log(row.dst) //查看播出号码
		  	this.phoneCallback (params)
			},
			searchBtn (){ //查询按钮事件
				if (this.loading) {
					return
				}
				this.loading = true
				let params={
					type: this.formHistorySearch.type,
						number: this.formHistorySearch.number,
						start: this.formHistorySearch.start,
						end: this.formHistorySearch.end,
						page: this.currentPageHistory,
					size: this.pageSizeHistory
				}
					this.searchTable(params);
					//console.log(this.formHistorySearch.start)
			},
	    lookDetails(index, row) {//查看详情
	        //console.log(row)
	      this.$router.push({
					path: '/home/historydetails',
					query: {
						type: row.inout,
							dst: row.dst,
							src: row.src,
							calldate: row.calldate,
							staff: row.staff,
							file: row.file,
							duration: row.duration
					}
				})
	    }
    }
  };
</script>
<style scoped>
 .order_main{padding-top:10px;}
</style>